<template>
  <view class="container">
    <!-- 商品信息 -->
    <view class="product-section">
      <view class="product-info" @click="navToProduct">
        <image :src="comment.productPic || '/static/img/default-product.png'" class="product-img"></image>
        <view class="info">
          <text class="name">{{comment.productName}}</text>
          <text class="attr">{{comment.productAttribute}}</text>
        </view>
      </view>
    </view>
    
    <!-- 评价内容 -->
    <view class="comment-section">
      <view class="user-rating">
        <view class="user-info">
          <image v-if="comment.memberIcon" :src="comment.memberIcon" class="avatar"></image>
          <image v-else src="/static/img/default-avatar.png" class="avatar"></image>
          <text class="nickname">{{comment.memberNickName || '匿名用户'}}</text>
        </view>
        <view class="rating">
          <text class="yticon icon-shitinghuiyuan" 
            v-for="star in 5" 
            :key="star" 
            :class="{'active': star <= comment.star}">
          </text>
          <text class="time">{{comment.createTime | formatTime}}</text>
        </view>
      </view>
      
      <view class="comment-content">
        <text>{{comment.content || '用户未填写评价内容'}}</text>
      </view>
      
      <view class="pics" v-if="comment.pics">
        <image 
          v-for="(pic, index) in formatPics(comment.pics)" 
          :key="index" 
          :src="pic" 
          class="pic" 
          mode="aspectFill"
          @click="previewImage(formatPics(comment.pics), index)">
        </image>
      </view>
      
      <!-- 商家回复 -->
      <view class="merchant-reply" v-if="comment.replyCount > 0 && comment.replyContent">
        <view class="reply-header">
          <text class="merchant-name">商家回复</text>
          <text class="reply-time" v-if="comment.replyTime">{{comment.replyTime | formatTime}}</text>
        </view>
        <view class="reply-content">
          <text>{{comment.replyContent}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getCommentDetail } from '@/api/comment.js';
  import { formatDate } from '@/utils/date';
  
  export default {
    data() {
      return {
        productId: null,
        orderId: null,
        comment: {
          star: 5,
          content: '',
          pics: ''
        },
        loading: false
      }
    },
    onLoad(options) {
      if (options.productId) {
        this.productId = options.productId;
      }
      if (options.orderId) {
        this.orderId = options.orderId;
      }
      this.loadCommentData();
    },
    filters: {
      formatTime(time) {
        if (!time) return '';
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
    methods: {
      // 加载评价数据
      loadCommentData() {
        if (!this.orderId || !this.productId) {
          uni.showToast({
            title: '缺少必要参数',
            icon: 'none'
          });
          return;
        }
        
        this.loading = true;
        uni.showLoading({
          title: '加载中...'
        });
        
        // 调用API获取评价详情
        getCommentDetail(this.orderId).then(response => {
          uni.hideLoading();
          this.loading = false;
          
          if (response.code === 200 && response.data) {
            this.comment = response.data;
          } else {
            uni.showToast({
              title: response.message || '获取评价失败',
              icon: 'none'
            });
          }
        }).catch(error => {
          console.error('获取评价详情失败:', error);
          uni.hideLoading();
          this.loading = false;
          
          uni.showToast({
            title: '获取评价失败，请稍后再试',
            icon: 'none'
          });
        });
      },
      
      // 处理图片地址
      formatPics(pics) {
        if (!pics) return [];
        if (typeof pics === 'string') {
          return pics.split(',').filter(pic => pic && pic.trim() !== '');
        }
        return Array.isArray(pics) ? pics : [];
      },
      
      // 预览图片
      previewImage(pics, current) {
        if (!pics || !pics.length) return;
        uni.previewImage({
          urls: pics,
          current: pics[current]
        });
      },
      
      // 跳转到商品详情
      navToProduct() {
        if (!this.productId) return;
        uni.navigateTo({
          url: `/pages/product/product?id=${this.productId}`
        });
      }
    }
  }
</script>

<style lang="scss">
  .container {
    background-color: #f8f8f8;
    min-height: 100vh;
    padding-bottom: 30rpx;
  }
  
  .product-section {
    background: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    
    .product-info {
      display: flex;
      align-items: center;
      
      .product-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        background-color: #f5f5f5;
        flex-shrink: 0;
      }
      
      .info {
        flex: 1;
        margin-left: 20rpx;
        overflow: hidden;
        
        .name {
          font-size: 28rpx;
          color: $font-color-dark;
          line-height: 1.5;
          margin-bottom: 10rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .attr {
          font-size: 24rpx;
          color: $font-color-light;
        }
      }
    }
  }
  
  .comment-section {
    background: #fff;
    padding: 30rpx;
    border-radius: 12rpx;
    margin: 0 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
    
    .user-rating {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .user-info {
        display: flex;
        align-items: center;
        
        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
        
        .nickname {
          font-size: 26rpx;
          color: $font-color-dark;
        }
      }
      
      .rating {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        
        .yticon {
          font-size: 36rpx;
          color: #ccc;
          margin-right: 10rpx;
          
          &.active {
            color: #ffb400;
          }
        }
        
        .time {
          font-size: 24rpx;
          color: $font-color-light;
          margin-top: 10rpx;
        }
      }
    }
    
    .comment-content {
      font-size: 28rpx;
      color: $font-color-dark;
      line-height: 1.5;
      margin-bottom: 20rpx;
    }
    
    .pics {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20rpx;
      
      .pic {
        width: 160rpx;
        height: 160rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 8rpx;
        background-color: #f5f5f5;
      }
    }
    
    .merchant-reply {
      background-color: #f8f8f8;
      padding: 20rpx;
      border-radius: 8rpx;
      
      .reply-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        
        .merchant-name {
          font-size: 26rpx;
          color: $font-color-dark;
          font-weight: bold;
        }
        
        .reply-time {
          font-size: 24rpx;
          color: $font-color-light;
        }
      }
      
      .reply-content {
        font-size: 26rpx;
        color: $font-color-base;
        line-height: 1.5;
      }
    }
  }
</style> 